---
title: 環境変数
description: Astroプロジェクトでの環境変数の使い方を学ぶ
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Astroは環境変数に関するViteの組み込みのサポートを利用しています。環境変数を扱うために[Viteが備える任意の方式](https://vitejs.dev/guide/env-and-mode.html)を使用できます。

サーバ側のコードでは _すべて_ の環境変数が使えますが、クライアント側のコードではセキュリティのために`PUBLIC_`というプレフィックスを持つ環境変数のみが使えることに注意してください。

```ini title=".env"
SECRET_PASSWORD=password123
PUBLIC_ANYBODY=there
```

この例では、`PUBLIC_ANYBODY`（`import.meta.env.PUBLIC_ANYBODY`でアクセス可能）はサーバサイドでもクライアントサイドでも利用でき、`SECRET_PASSWORD`（`import.meta.env.SECRET_PASSWORD`でアクセス可能）はサーバサイドでのみ利用できます。

:::caution
`.env`ファイルは[設定ファイル](/ja/guides/configuring-astro/#環境変数)の中では読み込まれません。
:::

## デフォルト環境変数

Astroでは、いくつかの環境変数をすぐに利用できます。

- `import.meta.env.MODE`: サイトが動作しているモードです。これは`astro dev`を実行している場合は`development`で、`astro build`を実行している場合は`production`になります。
- `import.meta.env.PROD`: あなたのサイトが本番環境で動作している場合は`true`となり、その他の場合は`false`となります。
- `import.meta.env.DEV`: あなたのサイトが開発環境で動作している場合は`true`となり、その他の場合は`false`となります。常に`import.meta.env.PROD`の反対となります。
- `import.meta.env.BASE_URL`: あなたのサイトの配信元のベースURLです。これは、[`base`オプション](/ja/reference/configuration-reference/#base)によって決まります。
- `import.meta.env.SITE`: プロジェクトの`astro.config`で指定された[`site`オプション](/ja/reference/configuration-reference/#site)がセットされます。
- `import.meta.env.ASSETS_PREFIX`: [`build.assetsPrefix`設定オプション](/ja/reference/configuration-reference/#buildassetsprefix)が設定されている場合に、Astroが生成するアセットリンクに付加されるプレフィックスです。Astroが関与しないアセットリンクを作成するために使用できます。

他の環境変数と同様に使用します。

```ts utils.ts
const isProd = import.meta.env.PROD;
const isDev = import.meta.env.DEV;
```

## 環境変数を設定する

### `.env`ファイル

環境変数は、プロジェクトディレクトリの`.env`ファイルから読み込めます。

また、`.env.production`や`.env.development`のように、ファイル名にモード(`production`または`development`)を付けることもできます。この場合、環境変数はそのモードでのみ有効になります。

プロジェクトディレクトリに`.env`ファイルを作成し、そこにいくつかの変数を追加するだけです。

```ini title=".env"
# これはサーバー上で実行したときのみ有効です！
DB_PASSWORD="foobar"
# これはどこからでも呼び出せます！
PUBLIC_POKEAPI="https://pokeapi.co/api/v2"
```

`.env`ファイルについてさらに知りたい場合は、[Viteのドキュメントを参照してください](https://vitejs.dev/guide/env-and-mode.html#env-files)。

### CLIの利用

プロジェクトの実行時に環境変数を追加することも可能です。

<PackageManagerTabs>
 <Fragment slot="yarn">
    ```shell
    PUBLIC_POKEAPI=https://pokeapi.co/api/v2 yarn run dev
    ```
 </Fragment>
 <Fragment slot="npm">
    ```shell
    PUBLIC_POKEAPI=https://pokeapi.co/api/v2 npm run dev
    ```
 </Fragment>
 <Fragment slot="pnpm">
    ```shell
    PUBLIC_POKEAPI=https://pokeapi.co/api/v2 pnpm run dev
    ```
 </Fragment>
</PackageManagerTabs>

## 環境変数を取得する

Astroでは、process.envの代わりにimport.meta.envを使用して環境変数にアクセスします。これは、[ES2020で追加されたimport.meta機能](https://tc39.es/ecma262/2020/#prod-ImportMeta)を使用しています。

例えば、環境変数`PUBLIC_POKEAPI`を取得するには、`import.meta.env.PUBLIC_POKEAPI`を使用します。

```js /(?<!//.*)import.meta.env.[A-Z_]+/
// import.meta.env.SSR === true のとき
const data = await db(import.meta.env.DB_PASSWORD);

// import.meta.env.SSR === false のとき
const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);
```

SSRを使う場合、使用するSSRアダプターによって実行時に環境変数にアクセスできます。ほとんどのアダプターでは`process.env`から環境変数にアクセスできますが、Denoアダプターでは`Deno.env.get()`を使用する必要があります。Cloudflareは[独自の方法](/ja/guides/integrations-guide/cloudflare/#cloudflare-runtime)で環境変数を処理します。Astroはサーバーの環境変数をチェックし、存在しない場合は`.env`ファイルを探します。

## TypeScriptのインテリセンス

デフォルトで、Viteは`vite/client.d.ts`の中で`import.meta.env`の型定義を提供します。

`.env.[mode]`ファイルではより多くのカスタム環境変数を定義できますが、`PUBLIC_`をプレフィックスとするユーザーが定義した環境変数のTypeScriptインテリセンスを取得したいと思うかもしれません。

これを実現するには、`src/`に`env.d.ts`を作成し、`ImportMetaEnv`を以下のように設定します。

```ts title="src/env.d.ts"
interface ImportMetaEnv {
  readonly DB_PASSWORD: string;
  readonly PUBLIC_POKEAPI: string;
  // その他の環境変数...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
```
